<template>
  <div class="codemirror">
    codemirror页面
    <textarea ref="mycode" class="sql" v-model="textarea"></textarea>
  </div>
</template>

<script>
import "codemirror/theme/ambiance.css";
import "codemirror/lib/codemirror.css";
import "codemirror/addon/hint/show-hint.css";
import "codemirror/theme/cobalt.css";
import "codemirror/addon/hint/show-hint.css";
import "codemirror/theme/blackboard.css";

const CodeMirror = require("codemirror/lib/codemirror");
require("codemirror/addon/edit/matchbrackets");
require("codemirror/addon/selection/active-line");
require("codemirror/mode/javascript/javascript");
require("codemirror/addon/hint/show-hint");
require("codemirror/keymap/sublime.js");
require("codemirror/addon/selection/active-line.js");
require("codemirror/addon/edit/matchbrackets.js");
require("codemirror/addon/display/autorefresh.js");
require("codemirror/addon/display/fullscreen.js");
require("codemirror/mode/sql/sql");
require("codemirror/mode/clike/clike.js");
require("codemirror/addon/hint/sql-hint.js");

export default {
  name: "codemirror",
  components: {},
  data() {
    return {
      textarea: "",
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initCode();
    });
  },
  methods: {
    initCode() {
      let mode = "text/x-mariadb";
      let theme = "cobalt";
      this.editorText = CodeMirror.fromTextArea(this.$refs.mycode, {
        // mode: mode,
        mode: { name: "text/x-mysql" },
        indentWithTabs: true,
        smartIndent: true,
        lineNumbers: true,
        matchBrackets: true,
        autoRefresh: true,
        theme: theme,
        extraKeys: {
            Ctrl: "autocomplete",
            F11: function(cm) {
	  	          cm.setOption("fullScreen", !cm.getOption("fullScreen"));
	  	    },
	  	    Esc: function(cm) {
	  	          if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
	  	       } 
        }, // 自定义快捷键
        hintOptions: {
            completeSingle:false,//当匹配项 只有一项时是否填充
          // 自定义提示选项
          tables: {
            users: ["name", "score", "birthDate", "select"],
            countries: ["name", "population", "size", "select"],
          },
        },
      });
      // 可选,挂载一下监听事项
      this.editorText.on("change", (cm) => {
        this.textarea = cm.getValue(); // 这里要用多一个载体去获取值,不然会重复赋值卡顿
      });
      this.editorText.setValue("select * from t_test_login where 1=1");

      this.editorText.on("change", function (editor, change) {
        if (change.origin == "+input") {
            console.log(change,"查看change")
          var textArray = change.text;
          console.log("查看关键数据",textArray)
          //不提示
        //   if (!textArray) {
            setTimeout(function () {
              editor.execCommand("autocomplete");
            }, 100);
        //   }
        }
      });
    },
  },
};
</script>

<style scoped>
</style>